<template>
    <header>
        <div class="header-container">
            <a class='logo' href="/">
                <span>Ronnie99.live</span>
            </a>
            <ul class="right-header">
                <li class="nav-item">
                    <a href="/" :class="{'active' : action === 'home'}" class="item-link">home</a>
                </li>
                
                <li class="nav-item">
                    <a href="/home/archives" :class="{'active' : action === 'archives'}" class="item-link">archives</a>
                </li>
                <li class="nav-item">
                    <a href="/home/tags" :class="{'active' : action === 'tags'}" class="item-link">tags</a>
                </li>
                <li class="nav-item">
                    <a href="/home/about" :class="{'active' : action === 'about'}" class="item-link">about</a>
                </li>
            </ul>
        </div>
    </header>
</template>
<script type="text/babel">
    export default{
        props:['action']
    }
</script>
